<template>

        <Card>
          
            <Table stripe border :columns="columns" :data="datas" size="small" :loading="isLoadig"></Table>

        </Card> 

</template> 

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import { DeviceTypeEnum } from '@/libs/const'
export default {
  name: 'abnormal_report',
  props: {
    room: {
      required: true
    },
    correlationDevice: {
      required: true
    }
  },
  data () {
    let columns1 = [
      {
        title: '房间号',
        align: 'center',
        render (createElement, obj) {
          let str = ''
          if (obj.row.room && obj.row.room.room_name) {
            const room_name = obj.row.room.building ? obj.row.room.building.room_name : ''
            const name = obj.row.room.room_name
            str = (name === 'default' ? '公共' : name) + (`${room_name ? `- ${room_name}` : ''}`) // 如果有楼栋就添加楼栋
          } else {
            str = '-'
          }

          return createElement(
            'span', // 标签名称
            str
          )
        }
      },
      {
        title: '设备信息',
        align: 'center',
        render: (h, obj) => {
          return h(
            'div',
            {
              style: {
                'text-align': 'left',
                'padding-left': '40%'
              }
            },
            [
              h('c-icon', {
                props: {
                  name: DeviceTypeEnum.properties[obj.row.device_type].icon,
                  align: 'middle',
                  className: 'icon-huge margin-right-10'
                },
                on: {
                  click: () => {
                    this.goToDeviceDetail(obj.row, obj.row.room.id, obj.row.room.room_name)
                  }
                }
              }),
              h(
                'span',
                {
                  style: {
                    'vertical-align': 'middle'
                  }
                },
                obj.row.description
              )
            ]
          )
        }
      }
    ]
    return {
      isLoadig: true,
      columns: columns1,
      datas: []
    }
  },
  mounted () {
    this.getData(1)
  },
  methods: {
    getData (page) {
      let roomId = this.room.roomId
      let device_id = this.room.id
      switch (this.correlationDevice) {
        case 'gateway':
          http.request(this, api.gateway_sub_devices, [roomId, device_id], null, (res, err) => {
            if (!res || err) {
              return
            }
            this.datas = res
            this.isLoadig = false
          })
          break
        case 'elecollector':
          http.request(this, api.elecollector_sub_devices, [roomId, device_id], null, (res, err) => {
            if (!res || err) {
              return
            }
            this.datas = res
            this.isLoadig = false
          })
          break
        case 'water_gateway':
          http.request(this, api.water_gateway_sub_devices, [roomId, device_id], null, (res, err) => {
            if (!res || err) {
              return
            }
            this.datas = res
            this.isLoadig = false
          })
      }
    },

    goToDeviceDetail (item, roomId, roomName) {
      const homeId = this.$route.params.homeId
      const deviceType = item.device_type
      const deviceId = item.id
      this.$router.push({
        path: `/tenancy-device/${homeId}`,
        query: {}
      })
      this.$router.push({
        path: `/tenancy-device/${homeId}`,
        query: {
          roomId,
          deviceType,
          deviceId,
          roomName
        }
      })
    }
  }
}
</script>

<style lang="less">
.icon-in-room {
    cursor: pointer;
    font-size: 40px;
    color: #05bac5;
    &.device-offline {
        color: #ff4d4d;
    }
}
.show {
    display: inline-block !important;
}
</style>